<template>
  <nav class="navbar navbar-dark bg-primary justify-content-between px-4 mb-4">
  <router-link to="/" class="navbar-brand" href="#">知否专栏</router-link>
  <ul class="list-inline mb-0" v-if="!user.isLogin">
    <li class="list-inline-item">
      <router-link to="/login" class="btn btn-outline-light my-2" href="#" role="button">登录</router-link>
    </li>
    <li class="list-inline-item">
      <router-link to="/signup" class="btn btn-outline-light my-2" href="#" role="button">注册</router-link>
    </li>
  </ul>
  <ul class="list-inline mb-0" v-else>
    <li class="list-inline-item">
      <dropdown :name="user.nickName">
        <Dropdown-item><router-link class="dropdown-item" :to="{name: 'createPost'}">新建文章</router-link></Dropdown-item>
        <Dropdown-item><router-link class="dropdown-item" :to="{path: `/columnDetail/${user.column}`}">编辑文章</router-link></Dropdown-item>
        <Dropdown-item><a class="dropdown-item" href="#">编辑资料</a></Dropdown-item>
        <Dropdown-item><a class="dropdown-item" href="#" @click="outLoginClick">退出登录</a></Dropdown-item>
      </dropdown>
    </li>
  </ul>
  </nav>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { useStore } from 'vuex'
import Dropdown from './Dropdown.vue'
import { userProps } from '../store' // user 类型
import DropdownItem from './DropdownItem.vue'

export default defineComponent({
  name: 'GlobalHeader',
  components: { Dropdown, DropdownItem },
  props: {
    user: {
      type: Object as PropType<userProps>,
      required: true
    }
  },
  setup () {
    const store = useStore()
    // 登出
    const outLoginClick = () => {
      store.commit('logout')
      store.commit('usercurrent', { isLogin: false })
    }
    return { outLoginClick }
  }
})
</script>
